<!--
* @author wn
* @date 2022/07/07 14:32:09
* @description: 登陆组件 入口
!-->
<template>
	<!-- 登陆头部 -->
	<login-header>{{ title }}</login-header>
	<!-- 二级路由  登陆注册  QQ回调 -->
	<router-view />
	<!-- 登陆尾部 -->
	<!-- <login-footer /> -->
	<xtx-copy-right />
</template>
<script>
import { ref, watch } from 'vue'
import LoginHeader from './components/LoginHeader'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
// import LoginFooter from './components/LoginFooter'

export default {
	name: 'Layout',
	components: { LoginHeader },
	setup() {
		const title = ref('欢迎登陆')
		// 监视 route 变化  /login --欢迎登陆   /login/callback--联合登陆
		// 跳转 QQ 登陆页  后 在 到 callback 不会触发变化 需要立马执行
		const route = useRoute()
		watch(
			() => route.path,
			newPath => {
				newPath === '/login'
					? (title.value = '欢迎登陆')
					: (title.value = '联合登陆')
			},
			{ immediate: true }
		)
		/**
		 * 在登录页 redirectUrl 保存在 vuex
		 * 进入登陆 页 已经保存了 --然后在选登陆方式
		 * 选择QQ登陆 会重走 setup 但是没有 redirectUrl 会走主页
		 * 所以此处 QQ登陆 啥也不干 保持 登录页的 redirectUrl
		 */

		if (title.value === '欢迎登陆') {
			const store = useStore()
			store.commit('user/setRedirectUrl', route.query.redirectUrl || '/')
		}
		return { title }
	},
}
</script>
<style scoped lang="less">
// 底部版权 更改组件样式
.copyright {
	background-color: #fff;
	padding: 30px 0 50px;
	font-size: 14px;
}
</style>
